<template>
  <div class="cover" ref="wrapper">
    <div class="tabcover">
      <div class="tab" v-for="(item,index) in tabs" :class="{tab_act_top:index == num}" @click="tab(index,item.id)">
        {{item.name}}
      </div>
    </div>
  </div>
</template>

<script>
  import Bscroll from 'better-scroll'

  export default {
    name: "tabbtn",
    props: {
      tabs: Array,
      num: Number
    },
    methods: {
      tab(index, id) {
        this.$emit('tabChange', index)
      }
    },
    created() {

    },
    mounted() {

      this.$nextTick(() => {
        this.scroll = new Bscroll(this.$refs.wrapper, {
          click: true,
          scrollX:true,
          scrollY:false
        })
      })
    }
  }
</script>

<style scoped lang="less">
  .cover{
    background-color: #fff;
    width: 100%;
    overflow: hidden;
  }

  .tab {
    /*display: inline-block;*/
    float: left;
    height: 28px;
    margin-left:10px;
    margin-right: 10px;
    position: relative;
  }
  .tab::after{
    content: " ";
    position: absolute;
    width: 15px;
    left: 50%;
    margin-left: -7.5px;
    bottom:0
  }

  .tab_act_top {
    color: @_green;
  }

  .tab_act_top::after{
    border-bottom: 2px solid @_green;
  }

  .tabcover {
    width: 150%;
    height: 33px;
    padding-top: 5px;
    background-color: #fff;
    overflow: auto;
  }
</style>
